<template>
<div style="width: 100%;height: 100%;margin: 0px;">
  <div class="top">
      <h1>教考分离系统</h1>
  </div>
  <div class="bottom">
      <el-button class="modeButton" @click="adminLogin">管理员登录</el-button>
      <el-button class="modeButton" @click="teacherLogin">教师登录</el-button>
      <el-button class="modeButton" @click="stuLogin">学生登录</el-button>
  </div>
</div>
</template>

<script>
export default {
    name: 'LoginMode',
    data() {
        return{
            title: '教考分离系统'
        }
    },
    methods: {
        adminLogin() {
            this.$router.push('/administratorlogin')
        },
        teacherLogin() {
            this.$router.push('/teacherlogin')
        },
        stuLogin() {
            this.$router.push('/studentlogin')
        }
    }
}
</script>

<style lang="less" scoped>
.top {
    height: 40%;
    width: 100%;
    display: block;
    text-align: center;
}
.bottom {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}
.modeButton {
    height: 100px;
    width: 200px;
    font-size: 2em;
    font-family: FZShuTi;
    margin-left: 100px;
    margin-right: 100px;
    background-color: rgb(80, 208, 212);
}

</style>